<template>
	<div :style="FieldItem?.attrs.buttonStyle" @mouseenter="showList" @mouseleave="hideList">
		<span style="padding-left: 15px">
			<i :class="FieldItem?.attrs.icon" />
			{{ FieldItem?.attrs.Title }}
		</span>
		<ul style="z-index: 99" :style="FieldItem?.attrs.ulStyle" :class="FieldItem?.attrs.showDrop ? '' : 'drop'">
			<div v-for="item in FieldItem?.attrs.treeData" :key="item.value">
				<li class="dropLi" :style="FieldItem?.attrs.liStyle" @mouseenter="showSub(item)">
					{{ item.label }}
				</li>
				<div :id="item.open ? 'sub' : ''" :style="FieldItem?.attrs.subStyle">
					<div v-for="sub in item.children" :key="sub.value">
						<router-link to="" class="dropA" :style="FieldItem?.attrs.twoLVStyle">
							{{ sub.label }}
							<i class="el-icon-arrow-right" style="font-size: 16px; margin-left: 10px" />
						</router-link>
						<div>
							<template v-if="sub.children">
								<div v-for="son in sub.children" :key="son.value" :style="FieldItem?.attrs.threeLVStyle">
									<router-link to="" class="dropB">{{ son.label }}</router-link>
								</div>
							</template>
							<div style="clear: both"></div>
						</div>
					</div>
				</div>
			</div>
		</ul>
	</div>
</template>

<script setup lang="ts">
import { treeData2Optioins } from '/@/components/Linxyun/custom/CustomCommon/tools.js';
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import Lxy_page_event_remote from '/@/components/Linxyun/custom/CustomCommon/lxy_page_event_remote.js';
const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem, pageData, inputData, globalData } = toRefs(props);

onMounted(() => {
	init();
});

const init = async () => {
	let res = await remoteMethod();
	if (res && res.data && res.data.Child) {
		FieldItem.value!.attrs.treeData = [];
		treeData2Optioins(res.data.Child, FieldItem.value!.attrs.treeData);
		FieldItem.value!.attrs.treeData.forEach((item: Record<string, any>) => {
			item.open = false;
		});
	}
};
const remoteMethod = async (): Promise<Record<string, any> | null> => {
	const event = new Lxy_page_event_remote(FieldItem.value?.dynamicOptions);
	console.log('[Debug][DealForm]remoteMethod, event', event);
	event.setDataSrc(pageData?.value, props.inputData, globalData?.value);
	const res = await event.callEvent();
	console.log('[Debug][DealForm]remoteMethod, res', res);
	if (!res || !res.code || res.code !== '0000' || !res.data) {
		console.error('[Error][CustomPage]Get remote data for cpn: ', FieldItem.value);
		return null;
	}

	return res;
};

const showList = () => {
	if (!FieldItem.value?.attrs.Fixed) {
		FieldItem.value!.attrs.showDrop = true;
	}
};
const hideList = () => {
	FieldItem.value?.attrs.treeData.forEach((data: Record<string, any>) => {
		data.open = false;
	});
	if (!FieldItem.value?.attrs.Fixed) {
		FieldItem.value!.attrs.showDrop = false;
	}
};
const showSub = (item: Record<string, any>) => {
	FieldItem.value?.attrs.treeData.forEach((data: Record<string, any>) => {
		data.open = false;
	});
	item.open = true;
};
</script>

<style scoped>
a {
	color: black;
	text-decoration: none;
}

#sub {
	opacity: 1 !important;
	height: 400px !important;
	display: block !important;
}

.drop {
	display: none;
}

.dropA:hover,
.dropB:hover {
	color: #0895e7 !important;
}

.dropA::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 90%;
	height: 1px;
	background: #e3e3e3;
}

.dropLi:hover {
	color: #0895e7;
	background: #ecf5ff;
}

ul {
	list-style: none;
}
</style>
